<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Towers</title>
    <meta name="description" content="Towers - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <style>
      html, body { background: #fff; }
      .dark { background: rgb(12,12,12); }
    </style>
  </head>
  <body>
    <a-scene stats>
      <a-assets>
        <a-mixin id="layer-1--light" material="color: rgb(255,255,255)"></a-mixin>
        <a-mixin id="layer-2--light" material="color: rgb(252,252,252)"></a-mixin>
        <a-mixin id="layer-3--light" material="color: rgb(248,248,248)"></a-mixin>
        <a-mixin id="layer-4--light" material="color: rgb(245,245,245)"></a-mixin>
        <a-mixin id="layer-5--light" material="color: rgb(235,235,235)"></a-mixin>
        <a-mixin id="layer-6--light" material="color: rgb(225,225,225)"></a-mixin>
        <a-mixin id="layer-7--light" material="color: rgb(215,215,215)"></a-mixin>
        <a-mixin id="layer-8--light" material="color: rgb(185,185,185)"></a-mixin>
        <a-mixin id="layer-9--light" material="color: rgb(166,166,166)"></a-mixin>

        <a-mixin id="layer-1--dark" material="color: rgb(12,12,12)"></a-mixin>
        <a-mixin id="layer-2--dark" material="color: rgb(36,36,36)"></a-mixin>
        <a-mixin id="layer-3--dark" material="color: rgb(46,46,46)"></a-mixin>
        <a-mixin id="layer-4--dark" material="color: rgb(57,57,57)"></a-mixin>
        <a-mixin id="layer-5--dark" material="color: rgb(92,92,92)"></a-mixin>
        <a-mixin id="layer-6--dark" material="color: rgb(112,112,112)"></a-mixin>
        <a-mixin id="layer-7--dark" material="color: rgb(142,142,142)"></a-mixin>
        <a-mixin id="layer-8--dark" material="color: rgb(179,179,179)"></a-mixin>
        <a-mixin id="layer-9--dark" material="color: rgb(219,219,219)"></a-mixin>
      </a-assets>

      <a-entity id="world" rotation="0 0 0" position="0 -3 0"></a-entity>

      <a-entity class="light--light" light="type: directional; color: #fff; intensity: 0.2"
                position="-1 2 1"></a-entity>
      <a-entity class="light--light" light="type: ambient; color: #eee;"></a-entity>

      <a-entity class="light--dark"
                light="type: directional; color: rgb(12,12,12); intensity: 0.2"
                position="-1 2 1" visible="false"></a-entity>
      <a-entity class="light--dark" light="type: ambient; color: #999"
                visible="false"></a-entity>
    </a-scene>

    <script>
      (function () {
        var html = document.documentElement;
        var body = document.body;

        window.addEventListener('devicelight', changeColor);

        function changeColor (e) {
          var active;
          var inactive;
          var els;

          if (e.value < 40) {
            html.classList.add('dark');
            body.classList.add('dark');
            active = 'dark';
            inactive = 'light';
          } else {
            html.classList.remove('dark');
            body.classList.remove('dark');
            active = 'light';
            inactive = 'dark';
          }

          els = document.querySelectorAll('[mixin$="--' + inactive + '"]');
          for (var i = 0; i < els.length; i++) {
            els[i].setAttribute(
              'mixin',
              els[i].getAttribute('mixin').replace('--' + inactive, '--' + active));
          }

          els = document.querySelectorAll('.light--' + inactive);
          for (var i = 0; i < els.length; i++) {
            els[i].setAttribute('visible', false);
          }

          els = document.querySelectorAll('.light--' + active);
          for (var i = 0; i < els.length; i++) {
            els[i].setAttribute('visible', true);
          }
        }

        var num = 18;
        var gap = 3;
        for (var x = -num; x < num; x += gap) {
          for (var z = -num; z < num; z += gap) {
            addTower({position: {x: x, y: 0, z: z}}, 9);
          }
        }

        function createCube (opts) {
          opts = opts || {};
          var cube = document.createElement('a-entity');

          opts.geometry = {
            primitive: 'box',
            height: opts.height,
            width: opts.width,
            depth: opts.depth
          };

          delete opts.height;
          delete opts.width;
          delete opts.depth;
          delete opts.idx;

          Object.keys(opts).forEach(function (key) {
            cube.setAttribute(key, opts[key]);
          });

          return cube;
        }

        function addTower (opts, numCubes) {
          opts = opts || {};
          if (!('width' in opts)) {
            opts.width = 1.5;
          }
          if (!('height' in opts)) {
            opts.height = 0.25;
          }
          if (!('depth' in opts)) {
            opts.depth = 1.5;
          }

          var firstCubeOpts = Object.assign({rotation: {x: 0, y: 45, z: 0}}, opts);
          firstCubeOpts.mixin = 'layer-1--light';

          var parentCube = createCube(firstCubeOpts);
          var firstCube = parentCube;

          var offsetX = 0;
          var offsetY = parseFloat((opts.position && opts.position.y) || 0) +
                        parseFloat(opts.height);
          var offsetZ = 0;

          var position = {
            x: offsetX,
            y: offsetY,
            z: offsetZ
          };

          for (var i = 1; i < numCubes; i++) {
            var newCubeOpts = Object.assign({}, opts);
            newCubeOpts.position = position;
            newCubeOpts.mixin = 'layer-' + (i + 1) + '--light';

            var newCube = createCube(newCubeOpts);
            parentCube.appendChild(newCube);
            parentCube = newCube;
          }

          world.appendChild(firstCube);
        }
      })();
    </script>
  </body>
</html>
